<template>
  <button @click="addItem">添加项目</button>
  <button @click="removeItem">删除最后一项</button>
  <transition-group name="list" tag="ul">
    <li v-for="(item, index) in items" :key="item.id" 
        :class="{'new-item': item.isNew, 'removed-item': item.isRemoved}">
      {{ item.text }}
    </li>
  </transition-group>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
  { id: 1, text: '项目1', isNew: false, isRemoved: false },
  { id: 2, text: '项目2', isNew: false, isRemoved: false }
]);

const addItem = () => {
  items.value.push({
    id: Date.now(),
    text: `项目${items.value.length + 1}`,
    isNew: true,
    isRemoved: false
  });

  setTimeout(() => {
    const lastItem = items.value[items.value.length - 1];
    if (lastItem) lastItem.isNew = false;
  }, 1000); // 1秒后移除新增状态
};

const removeItem = () => {
  if (items.value.length > 0) {
    const lastItem = items.value[items.value.length - 1];
    lastItem.isRemoved = true;
    setTimeout(() => {
      items.value = items.value.filter(item => !item.isRemoved);
    }, 1000); // 1秒后执行删除
  }
};
</script>
<style>
/* 列表基础动画 */
.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 状态样式 */
.new-item {

  background-color: #d4edda !important;

}
.removed-item {

  background-color: #f8d7da !important;

}
</style>